<template>
  <view>
    <view class="bill-detail">
      <!-- 日期显示 -->
      <view class="bill-date">{{ billData.date || "2025-01-10" }}</view>

      <!-- 订单收入部分 -->
      <view class="bill-section">
        <view class="section-header">
          <view class="total-amount">
            <view class="title">订单收入总金额</view>
            <view class="amount">{{ billData.totalPrice }}元</view>
            <view class="count">{{ billData.totalCount }}笔</view>
          </view>
        </view>

        <view class="bill-items">
          <view class="bill-item">
            <view class="label">订单支付</view>
            <view class="value">{{ billData.totalPrice }}元</view>
            <view class="count">{{ billData.totalCount }}笔</view>
          </view>
        </view>
      </view>

      <!-- 支出部分 -->
      <view class="bill-section">
        <view class="section-header">
          <view class="total-amount">
            <view class="title">支出总金额</view>
            <view class="amount">{{ billData.totalExpenditure || "0" }}元</view>
            <view class="count">{{ billData.expenditureCount || "0" }}笔</view>
          </view>
        </view>

        <view class="bill-items">
          <view class="bill-item">
            <view class="label">平台手续费</view>
            <view class="value">{{ Number(billData.platformCommissionRate).toFixed(2) }}元</view>
            <view class="count">{{ billData.platformCommissionCount }}笔</view>
          </view>
          <view class="bill-item">
            <view class="label">商户退款</view>
            <view class="value">{{ billData.refundTotalPrice }}元</view>
            <view class="count">{{ billData.refundCount }}笔</view>
          </view>
          <view class="bill-item">
            <view class="label">消费补贴赠送</view>
            <view class="value">{{ billData.gainIntegral || "0" }}元</view>
            <view class="count">{{ billData.gainIntegral || "0" }}分</view>
          </view>
          <view class="bill-item">
            <view class="label">平台积分抵扣</view>
            <view class="value">{{ billData.comunityIntegral || "0" }}元</view>
            <view class="count">{{ billData.comunityIntegral || "0" }}分</view>
          </view>
        </view>
      </view>

      <!-- 应入账总金额 -->
      <view class="final-amount">
        <view class="amount">{{ Number(billData.receivableTotalPrice).toFixed(2) }}元</view>
        <view class="title">应入账总金额</view>
      </view>

      <!-- 底部按钮 -->
      <!-- <view class="dialog-footer">
        <navigator :url="'/pages_sh/myOrder/dayOrder'"
          ><u-button type="primary">我知道了</u-button>
        </navigator>
      </view> -->
    </view>
  </view>
</template>

<script>
import { dayOrderInfoByIds } from "../../utils/merorder/mer";
export default {
  data() {
    return {
      billData: {}, // 存储账单详情
      dialogTop: "8vh", // 设置 dialog 顶部的距离
      billIds: "", // 账单 id
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.billIds = option.ids;
  },
  mounted() {
    this.fetchBillDetails(this.billIds);
  },
  methods: {
    // 获取账单详情
    fetchBillDetails(billIds) {
      let ids = { ids: billIds };
      dayOrderInfoByIds(ids).then((res) => {
        this.billData = res.data;
        // 计算支出总金额
        this.billData.totalExpenditure =
          (parseFloat(this.billData.platformCommissionRate) || 0) + (parseFloat(this.billData.refundTotalPrice) || 0) + (parseFloat(this.billData.refundMemberCouponSubsidy) || 0);
        this.billData.expenditureCount = (this.billData.platformCommissionCount || 0) + (this.billData.refundCount || 0) + (this.billData.refundMemberCouponCount || 0);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bill-detail {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .bill-date {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
  }

  .bill-section {
    margin-bottom: 30px;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .section-header {
      margin-bottom: 20px;

      .total-amount {
        text-align: center;

        .amount {
          font-size: 20px;
          color: #333;
          font-weight: 600;
          margin-bottom: 10px;
        }

        .title {
          font-size: 16px;
          color: #666;
          margin-bottom: 5px;
        }

        .count {
          font-size: 14px;
          color: #999;
        }
      }
    }

    .bill-items {
      .bill-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #eee;

        &:last-child {
          margin-bottom: 0;
          border-bottom: none;
        }

        .label {
          flex: 1;
          color: #666;
          font-size: 16px;
        }

        .value {
          flex: 1;
          text-align: right;
          color: #333;
          font-size: 16px;
          font-weight: 500;
        }

        .count {
          flex: 1;
          text-align: right;
          color: #999;
          font-size: 14px;
        }
      }
    }
  }

  .final-amount {
    text-align: center;
    margin: 30px 0;

    .amount {
      font-size: 32px;
      color: #f40c0c;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .title {
      font-size: 16px;
      color: #666;
    }
  }

  .dialog-footer {
    text-align: center;

    .u-button {
      width: 150px;
      height: 45px;
      border-radius: 22.5px;
      background-color: #4080ff;
      border-color: #4080ff;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      transition: background-color 0.3s, border-color 0.3s;

      &:hover {
        background-color: #3371e6;
        border-color: #3371e6;
      }
    }
  }
}
</style>
